<template>
  <div class="lg_loginwrap" id="loginwrap" style="min-height:422px">
    <div class="lg_loginbox lg_ercode" id="lg_loginbox" tabindex="0" style="outline: 0px; top: 10px; margin-top: 40px;" aria-label="旅行账号登录，点击tab切换聚焦位置" aria-modal="true">
      <h2 class="lg_loginbox_title" id="logintitle">旅行账号登录<a href="javascript:;" class="login_phone_number getOrder">手机号查单<i>&gt;</i></a></h2>
      <div class="form_wrap" id="normalview" style="display: block;">
        <dl>
          <dd><input class="r_input bbz-js-iconable-input" type="text" id="nloginname" placeholder="国内手机号/用户名/邮箱/卡号" v-model.trim="phone" @focus="focus(1)" @blur="focus(1)" @input="change(1)" maxlength="11">
            <i class="iconfont icon-delete" v-if="iconshow1==true" @click="phone='';iconshow1=false"></i>
          </dd>
        </dl>
        <dl>
          <dd class="r_input input_auth-code"><input type="password" id="npwd" placeholder="登录密码" data-noneedeye="" class=" bbz-js-iconable-input" v-model.trim="password" @focus="focus(2)" @blur="focus(2)" @input="change(2)"><a href="javascript:;" class="forgotpwd">忘记密码</a>
            <i class="iconfont icon-delete iconfr" v-if="iconshow2==true" @click="password='';iconshow2=false"></i>
          </dd>
        </dl>
        <dl>
          <div class="login-set"> <label class="auto-login"><input type="checkbox" checked="checked" id="normal30day">30天内自动登录</label> <a class="login-entry-dynamic" @click="changeShowNum(3)">手机动态密码登录 <i class="icon-arrowr"></i></a> </div>
          <dd> <input class="form_btn form_btn--block" id="nsubmit" type="submit" value="登   录" @click="login"> </dd>
        </dl>
        <p class="agreement-list"><input type="checkbox" class="agreement-checkbox" style="vertical-align:-2px;margin:3px 3px 3px 4px" checked>阅读并同意旅行的<a href="javascript:;" class="serviceAgreement">服务协议</a>和<a href="javascript:;" class="privacyPolicy">个人信息保护政策</a></p>
      </div>
      <div class="lg_weblogin" id="loginbanner" style="display: block;">
        <div class="login-about"> <a href="javascript:;" id="overseas_login">境外手机</a><span class="sep">|</span><a href="javascript:;" class="companylogin">公司客户</a><span class="sep">|</span><a class="cardlogin" target="_self" href="javascript:;" style="display: none;">合作卡</a><span class="sep" id="cardloginsep" style="display: none;">|</span><a class="fuli" target="_self" href="javascript:;">旅行通</a>
          <router-link to="/register" class="free-regist">免费注册</router-link>
        </div>
        <div class="login-other"> <a href="javascript:;" title="支付宝登录" class="icon-alipay" url="javascript:;">支付宝</a> <a href="javascript:;" title="QQ登录" class="icon-qq" url="/user/authorize/qq">QQ</a> <a href="javascript:;" title="百度登录" class="icon-baidu" url="javascript:;">百度</a> <a href="javascript:;" title="新浪微博登录" class="icon-sina" url="javascript:;">新浪微博</a> <a href="javascript:;" title="微信登录" class="icon-wechat" url="javascript:;">微信</a> <a href="javascript:;" title="网易登录" style="display:none" class="icon-163" url="/member/neteLogin/NeteAuthorize.aspx">网易</a> <a href="javascript:;" title="人人网登录" class="icon-renren" url="javascript:;" style="display: none;">人人网</a> </div>
      </div>
      <div class="login-code" id="changeScanLogin"> <a title="扫码登录更安全" id="scanLogin" logintype="scan" @click="changeShowNum(2)">扫码登录<i class="icon-ercode"></i></a> </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'LoginAccount',
  data() {
    return {
      iconshow1: false,
      iconshow2: false,
      phone: '',
      password: ''
    }
  },
  computed: {
    ...mapState({
      istrue: state => {
        return state.login.istrue
      }
    })
  },
  methods: {
    changeShowNum(num) {
      this.$store.dispatch('changeLoginShowNum', num)
    },
    focus(num) {
      if (num == 1) {
        this.iconshow1 = this.phone != '' || this.phone.length > 0 ? true : false
        this.iconshow2 = false
      }
      if (num == 2) {
        this.iconshow2 = this.password != '' || this.password.length > 0 ? true : false
        this.iconshow1 = false
      }
    },
    change(num) {
      num == 1 ? (this.iconshow1 = true) : (this.iconshow2 = true)
    },
    login() {
      if (this.phone != '' && this.password != '') {
        this.$store.dispatch('loginpwd', { phone: this.phone, password: this.password })
        let toPath = this.$route.query.redirect
        // console.log(111,toPath);
        setTimeout(() => {
          if (this.istrue == 1) {
            localStorage.setItem('user_phone', this.phone)
            if (toPath) {
              this.$router.push(toPath)
            } else {
              this.$router.push('/hotel')
            }
          } else {
            alert('该手机号未被注册')
            this.$router.push('/register')
          }
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
h1,
h2,
h3,
h4,
h5,
input {
  font-weight: 400;
  font-family: 'Microsoft YaHei', SimSun, Tahoma, Verdana, Arial, sans-serif;
}
input,
textarea {
  font-size: 12px;
}
.lg_loginwrap {
  position: relative;
  float: right;
  width: 380px;
  min-height: 540px;
  // margin-right: 72px;
  margin-right: -35px;
}
.lg_loginbox {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  background: #fff;
  padding: 30px 30px 20px;
  min-height: 370px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  box-shadow: 0 1px 6px rgb(0 0 0 / 10%);
  .lg_loginbox_title {
    position: relative;
    padding-bottom: 16px;
    font-size: 18px;
    color: #111;
    line-height: 1;
    font-family: PingFangSC-Medium, 'Microsoft YaHei', SimSun, Tahoma, Verdana, Arial, sans-serif;
    .login_phone_number {
      position: absolute;
      right: 0;
      font-size: 12px;
      color: #666;
      i {
        font-family: Simsun;
        font-style: normal;
        color: #bbb;
        font-size: 13px;
        font-weight: 700;
      }
    }
  }
}
.form_wrap {
  dl {
    padding: 8px 0;
    clear: both;
    &:after {
      clear: both;
      content: '.';
      display: block;
      height: 0;
      overflow: hidden;
    }
  }
  .r_input {
    position: relative;
    width: 300px;
    height: 28px;
    padding: 5px 5px 5px 13px;
    line-height: 28px;
    border: 1px solid #ccc;
    font-size: 14px;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    &.input_auth-code a {
      position: absolute;
      right: 0;
      top: 0;
      width: 80px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 12px;
      color: #666;
    }
  }
  .login-set {
    margin: 4px 0 13px;
    font-size: 12px;
    .auto-login {
      line-height: 1;
      color: #666;
      input {
        margin-right: 5px;
        vertical-align: -2px;
        font-size: 12px;
      }
    }
    .login-entry-dynamic {
      float: right;
      color: #666;
      .icon-arrowr {
        display: inline-block;
        background: url('../assets/images/un_login_20170818.png') no-repeat;
        vertical-align: -2px;
        width: 12px;
        height: 12px;
        background-position: 0 0;
      }
    }
  }
  .form_btn {
    background-color: #ff9a14;
    -webkit-appearance: none;
    height: 42px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border: 0;
    border-radius: 4px;
    clear: both;
    text-align: center;
  }
  .form_btn--block {
    width: 100%;
  }
  .agreement-list {
    margin-top: 5px;
    color: #999;
    line-height: 12px;
    text-align: center;
    font-size: 12px;
    a {
      padding: 0 3px;
      color: #999;
      border-bottom: 1px dotted #999;
    }
  }
}
.lg_weblogin {
  margin-top: 52px;
  .login-about {
    margin-bottom: 20px;
    line-height: 1;
    font-size: 12px;
    a {
      color: #666;
      &.free-regist {
        float: right;
        color: #3882e5;
      }
    }
    .sep {
      padding: 0 10px;
      color: #ccc;
    }
  }
  .login-other {
    text-align: left;
    margin-right: -18px;
    .icon-163,
    .icon-alipay,
    .icon-baidu,
    .icon-qq,
    .icon-renren,
    .icon-sina,
    .icon-wechat {
      width: 30px;
      height: 0;
      padding-top: 30px;
      overflow: hidden;
      display: inline-block;
      background: url('../assets/images/un_login_third.png') no-repeat;
      vertical-align: middle;
    }
    a {
      margin-right: 18px;
      &.icon-alipay {
        background-position: 0 0;
        &:hover {
          background-position: 0 -35px;
        }
      }
      &.icon-qq {
        background-position: -35px 0;
        &:hover {
          background-position: -35px -35px;
        }
      }
      &.icon-baidu {
        background-position: -70px 0;
        &:hover {
          background-position: -70px -35px;
        }
      }
      &.icon-sina {
        background-position: -105px 0;
        &:hover {
          background-position: -105px -35px;
        }
      }
      &.icon-wechat {
        background-position: -140px 0;
        &:hover {
          background-position: -140px -35px;
        }
      }
      &.icon-163 {
        background-position: -175px 0;
        &:hover {
          background-position: -175px -35px;
        }
      }
      &.icon-renren {
        background-position: -210px 0;
        &:hover {
          background-position: -210px -35px;
        }
      }
    }
  }
}
.login-code {
  position: absolute;
  top: 10px;
  right: -32px;
  background: #3882e5;
  -webkit-box-shadow: 0 1px 6px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 1px 6px 0 rgb(0 0 0 / 10%);
  a {
    font-size: 13px;
    color: #fff;
    line-height: 16px;
    padding: 9px;
    width: 14px;
    height: 86px;
    display: block;
  }
  .icon-ercode {
    display: inline-block;
    vertical-align: middle;
    background: url('../assets/images/un_login_20170818.png') no-repeat;
    width: 13px;
    height: 13px;
    background-position: -20px 0;
  }
}
dd {
  position: relative;
  .icon-delete {
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 2%;
    transform: translateY(-50%);
  }
  .iconfr {
    right: 25% !important;
  }
}
</style>